ANTOOZA-FRONTEND/app/(main)/stock/[code]/style.scss

// 종목 상세 (/stock/[code]) — 상단 요약 + 탭 (시세 = 일별 시세 고밀도 테이블)
#stock-detail {
	padding: var(--sp-6) var(--sp-7);

	@media (max-width: 767.98px) {
		padding: var(--sp-5) var(--sp-4);
	}

	// 상단 바 — 뒤로가기 + 관심종목
	.stock-detail__topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-3);
		margin-bottom: var(--sp-4);
	}

	.stock-detail__back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 1px solid var(--border-default);
		border-radius: 8px;
		background: var(--bg-card);
		color: var(--text-secondary);
		cursor: pointer;

		&:hover,
		&:focus-visible {
			background: var(--bg-subtle-hover);
			color: var(--text-primary);
		}
	}

	.stock-detail__watch {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		height: 36px;
		padding: 0 var(--sp-4);
		border: 1px solid var(--border-default);
		border-radius: 8px;
		background: var(--bg-card);
		color: var(--text-secondary);
		font-size: var(--fs-sm);
		cursor: pointer;

		&:hover,
		&:focus-visible {
			background: var(--bg-subtle-hover);
			color: var(--text-primary);
		}

		&:disabled {
			opacity: 0.6;
			cursor: default;
		}

		&--active {
			border-color: #f5b301;
			color: var(--text-primary);

			svg {
				color: #f5b301;
			}
		}
	}

	// 상단 요약
	.stock-detail__summary {
		padding-bottom: var(--sp-5);
		border-bottom: 1px solid var(--border-default);
	}

	.stock-detail__title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sp-3);

		h1 {
			font-size: var(--fs-2xl);
			font-weight: 700;
			color: var(--text-primary);
		}
	}

	.stock-detail__code {
		font-size: var(--fs-base);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	.stock-detail__sector {
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	.stock-detail__price {
		display: flex;
		align-items: baseline;
		gap: var(--sp-4);
		margin-top: var(--sp-4);
	}

	.stock-detail__close {
		font-size: 28px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.stock-detail__diff {
		font-size: var(--fs-lg);
	}

	.stock-detail__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3) var(--sp-6);
		margin-top: var(--sp-4);

		div {
			display: flex;
			align-items: baseline;
			gap: var(--sp-3);
		}

		dt {
			font-size: var(--fs-xs);
			color: var(--text-muted);
		}

		dd {
			font-size: var(--fs-sm);
			color: var(--text-primary);
			font-variant-numeric: tabular-nums;
		}

		// mobile 1열 스택
		@media (max-width: 767.98px) {
			flex-direction: column;
			gap: var(--sp-2);
		}
	}

	// T+1 명시 라벨
	.stock-detail__basis {
		margin-top: var(--sp-3);
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	// 탭
	.stock-detail__tabs {
		display: flex;
		gap: var(--sp-1);
		margin-top: var(--sp-5);
		border-bottom: 1px solid var(--border-default);

		a {
			display: inline-block;
			padding: var(--sp-3) var(--sp-5);
			font-size: var(--fs-base);
			color: var(--text-secondary);
			border-bottom: 2px solid transparent;

			&:hover {
				color: var(--text-primary);
			}

			&[aria-current='page'] {
				color: var(--text-primary);
				font-weight: 600;
				border-bottom-color: var(--az-accent);
			}
		}
	}

	.stock-detail__panel {
		margin-top: var(--sp-5);
	}

	// 일별 시세 테이블 — 얇은 선, 밀도 변수 소비
	.stock-detail__table {
		width: 100%;
		border-collapse: collapse;

		caption {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0 0 0 0);
			white-space: nowrap;
		}

		thead th {
			position: sticky;
			top: 0;
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			font-weight: 600;
			color: var(--text-muted);
			text-align: right;
			background: var(--bg-elevated);
			border-bottom: 1px solid var(--border-strong);

			&:first-child {
				text-align: left;
			}
		}

		tbody td {
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			color: var(--text-primary);
			text-align: right;
			border-bottom: 1px solid var(--border-light);
			font-variant-numeric: tabular-nums;
			white-space: nowrap;

			&:first-child {
				text-align: left;
			}
		}

		tbody tr:hover {
			background: var(--bg-subtle-hover);
		}

		// 등락률 셀 — 일반 td 색(--text-primary)이 .stock-change--* 를 덮지 않도록 우선순위 역전
		tbody td.stock-change--up {
			color: var(--price-up);
		}

		tbody td.stock-change--down {
			color: var(--price-down);
		}

		tbody td.stock-change--flat {
			color: var(--price-flat);
		}

		// mobile: 날짜/종가/등락률/거래량만 유지
		@media (max-width: 767.98px) {
			.stock-detail__col--sub {
				display: none;
			}
		}
	}

	// 대차 시계열 — 외국인 대여비율 추이 스파크라인 블록
	.stock-lending__trend {
		margin-bottom: var(--sp-5);
		padding: var(--sp-4);
		border: 1px solid var(--border-default);
		border-radius: 10px;
		background: var(--bg-card);
	}

	.stock-lending__trend-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-3);
		margin-bottom: var(--sp-3);
	}

	.stock-lending__trend-label {
		font-size: var(--fs-sm);
		color: var(--text-secondary);
	}

	.stock-lending__trend-latest {
		font-size: var(--fs-lg);
		font-weight: 700;
		color: var(--text-primary);
		font-variant-numeric: tabular-nums;
	}

	// 준비 중 placeholder / 에러 / 빈 데이터
	.stock-detail__placeholder,
	.stock-detail__empty,
	.stock-detail__error {
		padding: var(--sp-7) var(--sp-5);
		font-size: var(--fs-base);
		color: var(--text-muted);
		text-align: center;
	}

	.stock-detail__error strong {
		display: block;
		margin-bottom: var(--sp-3);
		color: var(--text-secondary);
	}
}